<template>
  <div>
    <Header :isGoBack="false">
      <!-- <template v-slot:left>
        <span>同步课文 <i class="el-icon-arrow-right"></i> 学习中心</span>
      </template> -->
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="study-center text-study-center question-study-center w1200">
      <div class="class-name flex-space-be">
        <div class="mr50 pl20">
          <span class="book-name mr30">
            {{
              checkedBookData.edition_name + "-" + checkedBookData.grade_name
            }}
          </span>
          <el-dropdown @command="checkBook">
            <span class="el-dropdown-link">
              换课程
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in classData"
                :key="item.book_id + '' + index"
                :command="item"
              >
                {{ item.edition_name }}-{{ item.grade_name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="class-name-right pr20">
          <div class="progress-box"></div>
          <div class="btn-box">
            <el-button
              class="button button-bg-primary"
              @click="
                () => {
                  goReviewQuestion();
                }
              "
              :disabled="sumReviewNum <= 0 || $store.getters.isTeacher"
            >
              一键智能复习 ({{ sumReviewNum }})
            </el-button>
          </div>
        </div>
      </div>
      <div class="study-conatiner flex-space-be">
        <div class="intelligent-study study-item mr20" id="step4">
          <div class="intelligent-study-header study-item-header flex-space-be">
            <span>智能学习区</span>
            <!-- <span>
              <span class="header-right click" @click="goTextBook">课文本</span>
            </span> -->
          </div>

          <div class="intelligent-study-container flex-space-be">
            <div
              class="
                intelligent-study-left
                mr20
                study-cotainer
                intelligent-study-item
              "
              id="step5"
            >
              <div class="intelligent-study-unit">
                <div
                  class="
                    study-cotainer-title
                    intelligent-item-header
                    flex-space-be
                  "
                >
                  <span class="title">选择单元</span>
                  <!-- <span class="title pr25">进度</span> -->
                </div>
                <div class="study-unit">
                  <div class="scorll-box">
                    <ul class="study-unit-list">
                      <li
                        v-for="unit in unitList"
                        :key="unit.unit_id"
                        :class="
                          checkedUnit == unit.unit_id ? 'checked-unit' : ''
                        "
                        @click="checkUnit(unit)"
                      >
                        <el-tooltip
                          effect="dark"
                          :content="unit.unit_name"
                          placement="top"
                          :disabled="unit.unit_name.length <= 9"
                          :open-delay="500"
                        >
                          <h5>
                            {{ unit.unit_name }}
                          </h5>
                        </el-tooltip>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="
                intelligent-study-right
                study-cotainer
                intelligent-study-item
              "
              id="step6"
            >
              <div class="study-cotainer-title intelligent-item-header" style="display: flex; justify-content: space-between;">
                <span>选择模块</span> <span @click="goCorrectionNotebook" style="color: rgb(92, 92, 238);cursor: pointer;">错题集</span>
              </div>
              <div class="intelligent-right-conatin">
                <div class="text-container">
                  <div class="text-study-item text-study-sentences">
                    <h4 class="text-study-item-title">同步练习</h4>
                    <div class="text-study-item-container">
                      <div class="text-study-item-left">
                        <div class="item-progress">
                          <el-progress
                            type="circle"
                            :percentage="
                              questionAccuracy ? questionAccuracy : 0
                            "
                            color="#ff9414"
                            class="green-text"
                            :width="120"
                            :show-text="false"
                          ></el-progress>
                          <div class="progress-text">
                            <div>{{ questionAccuracy }}%</div>
                            <p>正确率</p>
                          </div>
                        </div>
                        <div
                          class="item-left-btn"
                          :class="
                            $store.getters.isTeacher ? 'not-click' : 'click'
                          "
                          @click="goPractice"
                        >
                          <span> 随堂练习 </span>
                          <i class="font_family icon-1202youjiantou"></i>
                        </div>
                      </div>
                      <div class="text-study-item-right">
                        <div
                          class="item-right-btn"
                          :class="
                            $store.getters.isTeacher ? 'not-click' : 'click'
                          "
                          @click="goReviewQuestion(checkedUnit)"
                        >
                          <span>智能复习</span>
                          <span class="reminder-text">
                            {{ reviewNum }}
                            个
                          </span>
                          <span class="item-right-btn-icon">
                            <i class="font_family icon-1202youjiantou"></i>
                          </span>
                        </div>
                        <div
                          class="item-right-btn"
                          :class="
                            $store.getters.isTeacher ? 'not-click' : 'click'
                          "
                          @click="goTestPaper"
                        >
                          <span>闯关测试</span>
                          <span class="reminder-text">
                            {{
                              questionScore || questionScore == 0
                                ? questionScore + " 分"
                                : "未闯关"
                            }}
                          </span>
                          <span class="item-right-btn-icon">
                            <i class="font_family icon-1202youjiantou"></i>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { getClassData } from "@/api/index";
import { getUnitList, getUnitStudyStatus, getReviewSum } from "@/api/question";
export default {
  data() {
    return {
      driver: null,
      checkedUnit: null,
      unitList: [],
      statusClass: {
        0: "study-nolearn",
        1: "study-learning",
        2: "study-pass",
        3: "study-nopass",
      },
      checkedBookData: {},
      classData: [],
      reviewData: [],
      checkTypeDialog: false,
      questionType: [],
      reviewNum: 0,
      sumReviewNum: 0,
      questionAccuracy: 0,
      questionScore: 0,
    };
  },
  computed: {},
  methods: {
    goCorrectionNotebook() {
      this.$router.push({
        name: "correctionNotebook",
        query:{
          type:0
        }
      })
    },
    // 换课程
    async checkBook(data) {
      if (
        this.checkedBookData &&
        data.book_id != this.checkedBookData.book_id
      ) {
        await this.$store.dispatch("SetTimeEnglish", 1);
      }
      this.checkedBookData = data;
      localStorage.setItem("bookData", JSON.stringify(this.checkedBookData));
      this.getUnitList();
      this.getReviewSum();
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };

      let data = {
        bookId: this.checkedBookData.book_id,
      };

      getUnitList({ params, data }).then((res) => {
        if (res.code == 200 && res.data) {
          this.unitList = res.data;
          let index = this.unitList.findIndex((item) => {
            return item.unit_id == this.checkedUnit;
          });
          if (index == -1 && res.data.length > 0) {
            this.checkUnit(res.data[0]);
          } else {
            this.checkUnit(res.data[index]);
          }
        } else {
          this.unitList = [];
          this.reviewNum = 0;
          this.sumReviewNum = 0;
          this.questionAccuracy = 0;
          this.questionScore = 0;
        }
      });
    },
    goPractice() {
      if (this.$store.getters.isTeacher) {
        return;
      }
      this.$router.push({
        name: "questionPractice",
        query: {
          unitId: this.checkedUnit,
        },
      });
    },
    goReviewQuestion(unitId) {
      if (this.$store.getters.isTeacher) {
        return;
      }
      if (unitId && this.reviewNum <= 0) {
        this.$alert("还没有到最优的复习时间，稍后再来吧", "提示");
        return;
      }
      if (!unitId && this.sumReviewNum <= 0) {
        this.$alert("还没有到最优的复习时间，稍后再来吧", "提示");
        return;
      }
      this.$router.push({
        name: "questionPractice",
        query: {
          unitId: unitId,
          isReview: 1,
        },
      });
    },
    goTestPaper() {
      if (this.$store.getters.isTeacher) {
        return;
      }
      this.$router.push({
        name: "questionTestPaper",
        query: {
          unitId: this.checkedUnit,
        },
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    getClassData() {
      getClassData().then((res) => {
        if (res.code == 200 && res.data) {
          res.data = res.data.filter((item) => {
            return item.status == 0;
          });
          this.classData = res.data.filter((item) => {
            return (
              item.permission == 0 &&
              item.list &&
              item.list[0] &&
              item.list[0].exercise_state
            );
          });
          if (this.classData) {
            let index = this.classData.findIndex((item) => {
              return item.book_id == this.checkedBookData.book_id;
            });
            if (index == -1) {
              this.goStudyIndex();
            } else {
              this.checkBook(this.classData[index]);
            }
          }
        }
      });
    },
    getQuestionUnitData() {
      let params = {
        bookId: this.checkedBookData.book_id,
        unitId: this.checkedUnit,
      };
      getUnitStudyStatus({ params }).then((res) => {
        if (res.code == 200) {
          this.reviewNum = res.data.reviewCount;
          this.questionScore = res.data.lastScore;
          this.questionAccuracy = res.data.totalCount
            ? parseInt((res.data.rightCount / res.data.totalCount) * 100)
            : 0;
        }
      });
    },
    checkUnit(data) {
      this.checkedUnit = data.unit_id;
      localStorage.setItem("checkedUnit", JSON.stringify(data));
      this.getQuestionUnitData();
    },
    getReviewSum() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      getReviewSum({ params }).then((res) => {
        if (res.code == 200 && res.data) {
          this.sumReviewNum = res.data;
        }
      });
    },
  },
  created() {
    this.checkedUnit = localStorage.getItem("checkedUnit")
      ? JSON.parse(localStorage.getItem("checkedUnit")).unit_id
      : null;
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getClassData();
  },
  beforeDestroy() {
    if (this.driver) {
      this.driver.reset();
    }
  },
  mounted() {},
  components: { Header },
  watch: {},
};
</script>